<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:18:06
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-09-12 11:36:52
 * @Copyright: by 南京桓羽信息科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->

<template>
  <view class="page_content">
    <view class="head_content">
      <CustomNavbar></CustomNavbar>
    </view>
    <view class="main_content">
      <view class="msg-box">
        <view class="msg-box__title">Welcome to login~</view>
        <view class="msg-box__tip">Enjoy a better service experience after logging in</view>
      </view>
      <view class="input_box">
        <u-form ref="uForm" :model="form" :rules="rules">
          <u-form-item prop="mobile">
            <view class="input mobile">
              <!-- <country-code-selector :countryCode.sync="country"></country-code-selector> -->
              <!-- <span @click="showMobileCode = true">{{ countryList[currentCode].code }}</span> -->
              <u-input v-model="form.mobile" clearable placeholder="Please input your Email">
              </u-input>
            </view>
          </u-form-item>
          <!-- <u-form-item prop="password" >
						<view class="input">
							<u-input v-model="form.password" type="password" clearable placeholder="password"></u-input>
						</view>
					</u-form-item> -->
          <u-form-item prop="code">
            <view class="input">
              <u-input
                v-model="form.code"
                type="number"
                clearable
                placeholder="Please enter SMS code"
              >
                <template slot="suffix">
                  <u-code
                    ref="uCode"
                    uniqueKey="login-code"
                    :start-text="login.codeTips"
                    end-text="Reacquire"
                    change-text="After xs"
                    @change="codeChange"
                    :seconds="60"
                  ></u-code>
                  <u-button class="codebtn" @tap="getCode">{{ login.codeTips }}</u-button>
                </template>
              </u-input>
            </view>
          </u-form-item>
          <!-- <u-form-item prop="newPassword" v-if="login.type2 == 3">
						<view class="input">
							<u-input v-model="form.newPassword" type="password" clearable placeholder="password"></u-input>
						</view>
					</u-form-item> -->
        </u-form>
      </view>
      <view class="mobile_type">
        <!-- <view class="text" v-if="login.type2 == 1">
					<text @click="login.type2 = 2">phone login</text>
					<text @click="login.type2 = 3">reset password</text>
				</view> -->
        <view class="text">
          <text></text>
          <text @click="goToRegister">register</text>
        </view>
      </view>
      <view class="button_box">
        <u-button
          v-if="login.type == 1 && !login.bind"
          text="Login"
          :loading="buttonLoading"
          @click="loginSubmit"
        />
        <u-button
          v-if="login.type == 1 && login.bind"
          text="Submit"
          :loading="buttonLoading"
          @click="loginSubmit"
        />
        <u-button
          v-if="login.type == 2"
          :text="login.type2 == 3 ? 'Update' : 'Login'"
          :loading="buttonLoading"
          @click="loginSubmit"
        />
      </view>
      <!-- <view class="check_box">
				<u-checkbox-group @change="labelChange">
					<u-checkbox :name="true" label="阅读并同意" labelSize="28rpx" labelColor="#333"></u-checkbox>
				</u-checkbox-group>
				<text class="text" @click="agreementClick(1, '用户协议')">《用户协议》</text>
				<text>和</text>
				<text class="text" @click="agreementClick(2, '隐私协议')">《隐私协议》</text>
			</view> -->
      <!-- <view class="mode_text" v-if="login.platform != 'H5' && !login.bind">
				<view class="line left"></view>
				<view class="text">其他方式登录</view>
				<view class="line right"></view>
			</view>
			<view class="icon_box" v-if="login.platform != 'H5' && !login.bind">
				<view class="icon">
					<image class="image" v-if="login.type == 1" src="/static/icons/mobile.png" mode="aspectFill" @click="login.type = 2"></image>
					<image class="image" v-else src="/static/icons/wx.png" mode="aspectFill" @click="login.type = 1"></image>
				</view>
			</view>
			<view class="text_info" v-if="login.platform != 'H5' && !login.bind">
				<text class="text" @click="goToRegister">还没有账号？注册</text>
			</view> -->
      <view class="download" v-if="is_download">
        <view class="download-item view-center" @click="downloadHandler">
          <image src="../../static/ic_google@2x.png"></image> Get it on Google Play
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// import IndexList from './country.js'
import countryCodeSelector from '../../components/vue-country-code-selector/index.vue'
import { downloadGoogle } from '../../env.js'
export default {
  components: {
    countryCodeSelector
  },
  data() {
    return {
      country: 1,
      seconds: 60,
      countdownTimer: null,
      buttonStyle: {
        width: '100%',
        height: '100rpx',
        border: 'none',
        fontSize: '28rpx',
        color: '#fff',
        background: 'linear-gradient(90deg, #2A82E4, #D269FF)',
        borderRadius: '20rpx',
        margin: '0',
        fontWeight: 'bold'
      },
      buttonLoading: false,
      login: {
        type: 1, // 1(微信) / 2(手机号)
        type2: 2, // 1(密码) / 2(验证码) / 3(找回密码)
        platform: this.$utils.platforms(), // 平台(H5 / wxMiniProgram / wxOfficialAccount)
        codeTips: 'Get SMS code', // 验证码提示文字
        checked: false, // 协议勾选
        bind: false, // 需要绑定手机号(微信)
        auth: '' // 待绑定的授权ID
      },
      form: {
        mobile: '', //
        password: '', // 密码
        code: '', // 验证码
        newPassword: '' // 新密码
      },
      rules: {
        mobile: [
          { required: true, message: 'Please input your Email！', trigger: ['blur'] }
          // { validator: this.$utils.checkEmail, trigger: ['change', 'blur'] }
          // {
          //   message: 'the phone number is incorrect！',
          //   trigger: ['change', 'blur']
          // }
        ],
        password: [
          { required: true, message: 'Please enter password', trigger: ['blur', 'change'] }
          // { validator: this.$utils.checkPassword, trigger: ['change', 'blur'] }
        ],
        code: [
          {
            required: true,
            message: 'please enter verification code！',
            trigger: ['blur', 'change']
          }
          // { min: 4, max: 6, message: '请输入4~6位验证码', trigger: ['blur', 'change'] }
        ],
        newPassword: [
          { required: true, min: 6, max: 20, message: '请输入新密码', trigger: ['blur', 'change'] },
          { validator: this.$utils.checkPassword, trigger: ['change', 'blur'] }
        ]
      },
      configStore: this.$store.state.app.config,
      is_download: false
    }
  },
  watch: {
    'login.type': {
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue == 2) {
          this.$nextTick(() => {
            this.$refs.uForm.setRules(this.rules)
          })
        }
      }
    },
    'login.bind': {
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.$refs.uForm.setRules(this.rules)
          })
        }
      }
    },
    config: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.configStore = newValue
      }
    }
  },
  computed: {
    ...mapGetters('app', ['config', 'share']),
    navTitle() {
      let result = 'Login'
      if (this.login.bind) {
        result = 'Bind mobile phone number'
      } else {
        if (this.login.type == 2) {
          if (this.login.type2 == 1) {
            result = 'Password login'
          } else if (this.login.type2 == 2) {
            result = 'Verification code login'
          } else if (this.login.type2 == 3) {
            result = 'Retrieve password'
          }
        }
      }
      return result
    }
  },
  onLoad(option) {
    // 让App端同步H5端的登录
    if (this.$utils.platforms() === 'H5' || this.$utils.platforms() === 'App') {
      this.login.type = 2
    }
    if (option && option.t) {
      this.is_download = option.t
    }
    console.log(option, 'option')
    // if(this.$utils.platforms() === 'wxOfficialAccount' && option) {

    // 	this.wxoaAuthCallback(option)
    // }
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    downloadHandler() {
      window.location.href = downloadGoogle
    },
    // 查看协议
    agreementClick(id, title) {
      const rid =
        id === 1 ? this.configStore.system.user_protocol : this.configStore.system.privacy_protocol
      if (!rid) return
      const obj = { id: rid, title }
      this.jumpView(`/pages/user/info/richtext?d=${encodeURIComponent(JSON.stringify(obj))}`)
    },
    // 登录提交
    loginSubmit() {
      // if(!this.login.checked) {
      // 	this.$u.toast('请勾选并同意协议')
      // 	return
      // }
      console.log('country', this.country)
      let obj = {}
      console.log(this.login.type)
      this.$refs.uForm.validateField(['mobile', 'password'], (errors) => {
        console.log(obj, 'obj1')
        if (!errors.length) {
          obj = {
            phone: this.form.mobile,
            password: this.form.password,
            code: this.form.code,
            platform: this.login.platform,
            spm: this.share.spm || '',
            country: this.country
          }
          console.log(obj, 'obj2')
          this.codeLogin(obj)
        }
      })
      // if(this.login.type == 1) {
      // 	// #ifdef H5
      // 	console.log(this.login.bind)

      // 	// 微信小程序
      // 	if(this.login.bind) {
      // 		this.bindAuthMobile(true)
      // 	} else {
      // 		this.wxmpAuth()
      // 	}
      // 	// #endif
      // 	// #ifdef H5
      // 	// 微信公众号
      // 	if(this.login.bind) {
      // 		this.bindAuthMobile(true)
      // 	} else {
      // 		this.wxoaAuth()
      // 	}
      // 	// #endif
      // } else {
      // 	if(this.login.type2 == 1) {
      // 		// 密码登录
      // 		this.$refs.uForm.validateField(['mobile', 'password'], errors => {
      // 			if(!errors.length) {
      // 				obj = {
      // 					account: this.form.mobile,
      // 					password: this.form.password
      // 				}
      // 				this.accountLogin(obj)
      // 			}
      // 		})
      // 	} else if(this.login.type2 == 2) {
      // 		// 验证码登录
      // 		this.$refs.uForm.validateField(['mobile', 'code'], errors => {
      // 			console.log(obj,'obj1')
      // 			if(!errors.length) {
      // 				obj = {
      // 					phone: this.form.mobile,
      // 					code: this.form.code,
      // 					platform: this.login.platform,
      // 					spm: this.share.spm || ''
      // 				}
      // 				console.log(obj,'obj2')
      // 				this.codeLogin(obj)
      // 			}
      // 		})
      // 	} else {
      // 		// 找回密码
      // 		this.$refs.uForm.validateField(['mobile', 'code', 'newPassword'], errors => {
      // 			if(!errors.length) {
      // 				obj = {
      // 					mobile: this.form.mobile,
      // 					code: this.form.code,
      // 					password: this.form.newPassword
      // 				}
      // 				this.forgotPassword(obj)
      // 			}
      // 		})
      // 	}
      // }
    },
    // 1.账号密码登录
    accountLogin(obj) {
      this.$request('login.accountLogin', obj).then((res) => {
        if (res.code === 1) {
          this.$u.toast('login successful')
          this.getUserInfo(res.data.token)
          this.redirectPath()
        }
      })
    },
    // 2.验证码登录
    codeLogin(obj) {
      console.log(obj, 'codeLogin')
      this.$request('login.codeLogin', obj).then((res) => {
        console.log(res, 'Get SMS code')
        this.$u.toast('login successful')
        this.getUserInfo(res.data.token)
        this.redirectPath()
      })
    },
    // 3.找回密码
    forgotPassword(obj) {
      this.$request('login.forgotPassword', obj).then((res) => {
        if (res.code === 1) {
          this.$u.toast('密码修改成功')
          this.login.type2 = 1
        }
      })
    },

    wxmpAuth() {
      // 4.微信小程序授权
      // #ifdef H5
      const loginRequest = () => {
        console.log('走了进来')

        uni.login({
          provider: 'weixin',
          success: (success) => {
            if (success.errMsg === 'login:ok') {
              console.log('调用成功')

              this.$request('login.wxmpLogin', { code: success.code }).then((res) => {
                if (res.code === 1) {
                  if (res.data.token) {
                    this.$u.toast('login successful')
                    this.getUserInfo(res.data.token)
                    this.redirectPath()
                  }
                  if (res.data.user_oauth_id) {
                    this.login.auth = res.data.user_oauth_id
                    if (this.config.system.mobile_switch == 1) {
                      this.login.bind = true
                    } else {
                      this.bindAuthMobile(false)
                    }
                  }
                }
              })
            } else {
              console.log('调用失败')
            }
          }
        })
      }

      if (process.env.NODE_ENV === 'development') {
        console.log('开发环境')
        // this.getUserInfo("b0c3d7cf-d6c8-4b77-993b-918c81ad19d0")
        // this.redirectPath()
        loginRequest()
      } else {
        loginRequest()
      }
      // #endif
    },
    // 5.微信公众号授权
    async wxoaAuth() {
      // #ifdef H5
      if (process.env.NODE_ENV === 'development') {
        console.log('开发环境')
        await this.getUserInfo('71067ca6-d3ca-465f-b640-eb858ca846e1')
        this.redirectPath('wxoa')
      } else {
        const obj = {
          host: this.$WXOA_CALLBACK,
          event: 'login'
        }
        const payload = encodeURIComponent(JSON.stringify(obj))
        const redirect_uri = encodeURIComponent(
          `${this.$BASE_URL}/addons/drama/user/wxOfficialAccountOauth/sign/${this.$SIGN}?payload=${payload}`
        )
        const oauthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$store.state.app.appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=1`
        const page = getCurrentPages()
        const prevPage = page[page.length - 2]
        const lastPage = prevPage.__page__.fullPath
        uni.setStorageSync('lastPage', lastPage)
        window.location.href = oauthUrl
      }
      // #endif
    },
    // 微信公众号授权回调
    async wxoaAuthCallback(option) {
      if (option?.token) {
        await this.getUserInfo(option.token)
        await this.redirectPath('wxoa')
      }
      if (option?.user_oauth_id) {
        this.login.auth = option.user_oauth_id
        if (this.config.system.mobile_switch == 1) {
          this.login.bind = true
        } else {
          this.bindAuthMobile(false)
        }
      }
    },
    // 微信小程序/公众号 绑定授权手机号
    bindAuthMobile(bind) {
      let obj = {
        user_oauth_id: this.login.auth,
        spm: this.share.spm || ''
      }
      const api = () => {
        this.$request('login.wxBind', obj).then((res) => {
          if (res.code === 1) {
            this.$u.toast('绑定成功')
            this.getUserInfo(res.data.token)
            this.redirectPath()
          }
        })
      }
      if (!bind) return api()
      this.$refs.uForm.validateField(['mobile', 'code'], (errors) => {
        if (!errors.length) {
          obj = { ...obj, mobile: this.form.mobile, code: this.form.code }
          api()
        }
      })
    },
    // 重定向页面
    redirectPath(type) {
      if (type == 'wxoa') {
        // #ifdef H5
        const lastPage = uni.getStorageSync('lastPage')
        if (lastPage && lastPage.indexOf('/pages/login/login') == -1) {
          uni.removeStorageSync('lastPage')
          uni.switchTab({
            url: lastPage,
            success: () => {},
            fail: () => {
              uni.switchTab({
                url: '/pages/home/index',
                success: () => {
                  uni.navigateTo({ url: lastPage })
                }
              })
            }
          })
        } else {
          uni.switchTab({ url: '/pages/home/user' })
        }
        // #endif
      } else {
        var pages = getCurrentPages() // 获取页面指针数组
        if (pages.length > 1) {
          let lastPage = {}
          for (let i = pages.length - 2; i >= 0; i--) {
            if (pages[i].route != 'pages/login/index' && !lastPage.route) {
              lastPage = pages[i]
            }
          }

          // if (pages[pages.length - 2].route != 'pages/login/index') {
          //   lastPage = pages[pages.length - 2]
          // }
          // if (pages[pages.length - 3].route != 'pages/login/index') {
          //   lastPage = pages[pages.length - 3]
          // }
          // var lastPage = pages[pages.length - 2] // 获取当前页
          let paramsArr = []
          for (let key in lastPage.options) {
            paramsArr.push(key + '=' + lastPage.options[key])
          }
          try {
            this.$utils.navigateTo(
              {
                url: '/' + lastPage.route + '?' + paramsArr.join('&')
              },
              1
            )
          } catch (error) {
            wx.switchTab({
              url: '/pages/home/index'
            })
          }
        } else {
          wx.switchTab({
            url: '/pages/home/index'
          })
        }
      }
    },
    // 去注册
    goToRegister() {
      uni.redirectTo({url:'/pages/login/register'})
    },
    // 协议勾选
    labelChange(detail) {
      this.login.checked = detail[0] ? detail[0] : false
    },
    // 验证码倒计时
    codeChange(text) {
      this.login.codeTips = text
    },
    // 获取验证码
    getCode() {
      if (!this.form.mobile) {
        this.$u.toast('Please input your Email！')
        return
      }
      let event = ''
      if (this.login.type == 1) {
        event = 'changemobile'
      } else {
        if (this.login.type2 == 2) {
          event = 'mobilelogin'
        } else if (this.login.type2 == 3) {
          event = 'resetpwd'
        }
      }
      let obj = {
        country: this.country,
        phone: this.form.mobile,
        event
      }
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({ title: 'Getting verification code！' })
        this.$request('login.sendCode', obj, false)
          .then((res) => {
            // if(res.code === 1) {
            // } else {
            // 	uni.hideLoading()
            // }

            uni.hideLoading()
            uni.$u.toast('Verification code sent！')
            this.$refs.uCode.start()
          })
          .catch((err) => {
            uni.hideLoading()
            uni.$u.toast('Failed to send verification code！')
          })
      } else {
        uni.$u.toast('Send after countdown ends！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.u-button__text {
  font-size: 26rpx !important;
}
/deep/.u-input__content__field-wrapper__field {
  font-size: 24rpx !important;
}
.downloads {
  margin-top: 120rpx;
  display: flex;
  justify-content: space-evenly;
}

.downloads .download_item {
  width: 240rpx;
  height: 70rpx;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 10rpx;
}

// .downloads .download_item.google {
// 	background-image: url('../../static/images/google-play.png');
// }

// .downloads .download_item.apple {
// 	background-image: url('../../static/images/WechatIMG6394.jpg');
// }

.register_text {
  margin-top: 64rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 31rpx;
  color: #e49aee;
  text-align: center;
}

// .page_content{
//   --color-primary: rgba(138, 192, 23,0.7);
// }
.input {
  background-color: rgb(33, 33, 33) !important;
}

.check_box {
  margin-top: 120rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #999999;

  .text {
    color: #e49aee;
  }
}

.msg-box {
  margin-top: 45rpx;

  &__title {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 46rpx;
    color: #fff;
  }

  &__tip {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #fff;
    margin-top: 30rpx;
  }
}

.page_content {
  background-image: url('../../static/images/login-background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.main_content {
  padding: 60rpx;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  .logo {
    width: 100%;
    padding: 40rpx 100rpx 100rpx 100rpx;

    .image {
      width: 100%;
    }
  }

  .input_box {
    margin-top: 250rpx;

    ::v-deep .u-form {
      // .u-form-item__body {
      // 	padding: 0 0 40rpx 0 !important;
      // }
      .u-form-item__body__right__content {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px;
      }

      .u-form-item__body__right__message {
        margin-left: 0 !important;
        line-height: 1.5em;
        font-size: 28rpx;
        padding: 0 10rpx 20rpx 10rpx;
      }
    }

    /deep/.u-form-item {
      border-bottom: none;
    }

    .input.mobile {
      color: #fff;
      display: flex;
      align-items: center;
    }

    .input {
      width: 100%;

      ::v-deep .u-input {
        height: 100rpx;
        // background: #F7F8F9;
        border-radius: 0;
        border: none;
        padding: 12rpx 24rpx !important;
        // border-bottom: 1px solid rgba(255, 255, 255,0.1) !important;
      }

      .codebtn {
        padding-left: 15rpx;
        padding-right: 15rpx;
        // font-size: 28rpx;
        // color: #333;
        // height: 56rpx;
        border-radius: 28rpx;
        border: none;
        font-size: 30rpx;
        background-color: transparent;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: $color-primary;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .mobile_type {
    .text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #999;
      margin-top: 40rpx;
    }
  }

  .button_box {
    margin: 64rpx 0 0;

    /deep/.u-button {
      width: 100%;
      height: 98rpx;
      border-radius: 23rpx;
      background: $color-primary;
      border-color: transparent !important;
      color: #ffffff;
      font-size: 34rpx;
      font-family: PingFangSC, PingFang SC;
    }
  }

  .mode_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-top: 100rpx;

    .line {
      width: 152rpx;
      height: 2rpx;
      background: #d5dde0;
    }

    .text {
      color: #333e63;
      font-size: 28rpx;
    }
  }

  .icon_box {
    margin: 160rpx 0 80rpx 0;

    .icon {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;

      .image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .text_info {
    text-align: center;

    .text {
      color: #626262;
      font-size: 28rpx;
    }
  }
}
.download {
  color: white;
  flex: 1;
  display: flex;
  align-items: flex-end;
  margin: 0 30rpx 140rpx;
  &-item {
    height: 108rpx;
    width: 100%;
    border: 2rpx solid rgba(255, 255, 255, 0.25);
    border-radius: 4rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 35rpx;
    color: #ffffff;
    image {
      width: 78.85rpx;
      height: 78.85rpx;
      margin-right: 20.5rpx;
    }
  }
}
</style>
